<!DOCTYPE html>
<html  class="x-admin-sm">
<#include "../layout/meta.ftl">
<body class="layui-layout-body">
<div style="margin: 2vw">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>Docker 容器列表</legend>
    </fieldset>
    <table class="layui-hide" id="project" lay-filter="project"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="start">启动</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="stop">停止</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="term">容器终端</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<style>
    .layui-table-cell {
        height:auto;
    }
    .layui-body{
        overflow-x: scroll;
    }
    body{
        overflow-y: scroll;
    }
</style>
<script>
    //JavaScript代码区域
    layui.use(['element','table'], function(){
        let element = layui.element,table = layui.table;
        tableId=table.render({
            elem: '#project'
            ,url:'/docker/getContainerList'
            ,method:'get'
            ,contentType:'application/json'
            ,height:"full-110"
            ,cols: [[
                {field:'Id',align:'center', width:'15%', title: '容器Id',templet:function (data) {
                        return data.Id.substr(0,30)
                    }}
                ,{field:'Names',align:'center', title: '容器名', width: '7%'}
                // ,{field:'Image',  title: '镜像名'}
                // ,{field:'Command',  title: '命令'}
                ,{field:'Status',align:'center',   title: '状态', width:'13%'}
               /* ,{field:'State',  title: '运行状态'}*/
                ,{field:'Ports',align:'center', width:'10%',  title: '端口映射<br>(容器端口->宿主机)', templet:function (t) {
                    let sret ='';
                    for(let i = 0; i < t.Ports.length; i++){
                        sret += (t.Ports[i].PrivatePort+"→"+t.Ports[i].PublicPort)+'<br>' ;
                    }
                    return sret;
                 }}
                ,{field:'Mounts',align:'center',width:'25%',  title: '目录挂载<br>(容器目录→宿主机)', templet:function(t){
                        let sret = '' ;
                        for(let i = 0; i < t.Mounts.length; i++){
                            sret += (t.Mounts[i].Destination+"→"+t.Mounts[i].Source) + '<br>' ;
                        }
                        return sret;
                    }}
                ,{field:'Created',align:'center', width:'10%',  title: '创建时间', templet:function (t) { return layui.util.toDateString(t.time) }}
                ,{fixed: 'right',align:'center', width:'20%', title:'操作', toolbar: '#barDemo'}

            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.message, //解析接口状态
                    "data": res.data, //解析数据列表
                    "count": res.data.total, //解析数据长度
                };
            },
            done: function (res, curr, count) {
                exportData=res.data;
            }
        });
        //监听工具条
        table.on('tool(project)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "start":projectDel("/docker/containerStart/"+data.Id,"是否启动");break;
                case "stop":projectDel("/docker/containerStop/"+data.Id,"是否停止");break;
                case "term":xadmin.open('容器'+data.Id,'/docker/terminal/'+data.Id,1200, 650);break;
                case "del":projectDel("/docker/containerDel/"+data.Id,"是否删除");break;
            }
        });
        function projectDel(url,msg) {
            layer.alert(msg,function () {
                $.ajax({
                    url:url,
                    type:"get",
                    success:function (res) {
                        layer.msg("操作成功", {icon: 1});
                        tableId.reload({
                            page: 1
                        });
                    }
                });
            });
        }


    });
</script>
</body>
</html>